<template>
  <div style="height:100%;position:fixed;left:20px">
    <a @click="updateOpen">展开</a>
    <el-scrollbar ref="scrollb" class="as-body" style="height:100%;" :native="false">
      <Menu ref="child" active-name="3-1">
        <!--:active-name="$route.name"-->
        <Submenu name="1">
          <template slot="title">产品简介</template>
          <MenuItem name="1-1">产品概述</MenuItem>
          <MenuItem name="1-2">常用概念</MenuItem>
        </Submenu>
        <Submenu name="2">
          <template slot="title">审核标准</template>
          <MenuItem name="2-1">使用须知</MenuItem>
          <MenuItem name="2-2">签名审核标准</MenuItem>
          <MenuItem name="2-3">正文模板审核标准正文模板审核标准正文模板审核标准</MenuItem>
          <MenuItem name="2-4">正文模板示例</MenuItem>
          <Submenu name="3">
            <template slot="title">购买指南</template>
            <MenuItem name="3-1">计费概述</MenuItem>
            <MenuItem name="3-2">价格说明</MenuItem>
          </Submenu>
        </Submenu>
        <Submenu name="4">
          <template slot="title">Navigation Three</template>
          <MenuItem name="4-1">Option 9</MenuItem>
          <MenuItem name="4-2">Option 10</MenuItem>
          <MenuItem name="4-3">Option 11</MenuItem>
        </Submenu>
      </Menu>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      openNames: ["1"],
    };
  },
  methods: {
    updateOpen() {
      if (this.openNames.length) {
        this.openNames = [];
      } else {
        this.openNames = ["1", "2", "4"];
      }

      this.$nextTick(() => {
        this.$refs.child.updateOpened();
      });
    },
  },
  watch: {
    $route(to, from) {
      this.$nextTick(this.$refs.scrollb.update);
    },
  },
  mounted() {
    this.$nextTick(() => {
      let ref = this.$refs.child;
      let item = null;
      let f = (val) => {
        this.$nextTick(() => {
          for (item of val) {
            // MenuItem 处于选中状态就展开 Submenu
            if (item.active === true || item.opened === true) {
              this.activeVal = '3-1';
              if (typeof item.$parent.opened !== "undefined") {
                item.$parent.opened = true;
                return f([item.$parent]);
              }
            }
          }
        });
      };
      f(ref);
    });
  },
};
</script>